<template>
		<div class="login_container">
				<div class="login_box">
						<!--头像区域-->
						<div class="avatar-box">
								<img src="../assets/item.png" alt="">
						</div>

						<!--登录表单 :rules绑定验证规则 :model绑定表单数据-->
						<h2 style="text-align: center;position: absolute;bottom: 60%;left: 50%;transform: translate(-50%)">
								光阴的故事</h2>
						<el-form label-width="80px" :model="login" ref="loginForm" status-icon :rules="loginFormRules"
															class="login_form">

								<!-- prop 绑定验证规则 -->
								<el-form-item label="用户名:" prop="username">
										<el-input prefix-icon="el-icon-user" v-model="login.username"></el-input>
								</el-form-item>
								<el-form-item label="密　码:" prop="password">
										<el-input type="password" prefix-icon="el-icon-lock" v-model="login.password"></el-input>
								</el-form-item>
								<el-form-item class="btns">
										<el-button type="primary" @click="loginBtn" :loading="is_load">登录</el-button>
										<el-button type="info" @click="resBtn">重置</el-button>
								</el-form-item>
						</el-form>
				</div>

				<div style="position: fixed;bottom: 0%;text-align: center;width: 100%">
						<el-link href="http://beian.miit.gov.cn">皖ICP备2021002192号;工信部首页</el-link>
				</div>
		</div>
</template>

<script>
import $axios from "../network/request";

export default {
		name: "Login",
		data() {
				return {
						login: {
								username: 'admin',
								password: '123456'
						},
						loginFormRules: {
								username: [
										{required: true, message: '请输入用户名', trigger: 'blur'},
										{min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur'}
								],
								password: [
										{required: true, message: '请输入密码', trigger: 'blur'},
										{min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur'}
								]
						}
				}
		},
		methods: {
				loginBtn() {
						this.$refs.loginForm.validate((valid) => {
								if (valid) {
										this.is_login = true
										$axios({
												url: '/login',
												method: 'post',
												data: {
														username: this.login.username,
														password: this.login.password,
												}
										}).then(res => {
												if (res.data.meta.status == 200) {
														this.$store.commit("SET_USER", res.data.data.username)
														this.$store.commit("hide_loading")
														sessionStorage.setItem('token', res.data.data.token)
														this.$router.push(this.$store.state.activePath)
														this.$message.success("登录成功")
												} else {
														this.$store.commit("hide_loading")
														this.$message.error(res.data.meta.msg)
												}
										}).catch(res => {
												this.$store.commit("hide_loading")
												this.$message.error("登录出现异常")
										})
								} else {
										this.$message.error("请输入合法的用户名或密码")
										return false;
								}
						});
				},
				resBtn() {
						this.$refs.loginForm.resetFields();
				}
		},
		computed: {
				is_load() {
						return this.$store.state.is_loading
				}
		}
}
</script>

<style lang="less" scoped>
.login_container {
		background: #74ebd5; /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5); /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

		height: 100%;

		.login_box {
				height: 350px;
				width: 525px;
				background-color: white;
				position: absolute;
				border-radius: 10px;
				top: 50%;
				left: 50%;
				/*实现居中效果*/
				box-shadow: 1px 1px 3px #888888;
				transform: translate(-50%, -50%);

				.avatar-box {
						height: 130px;
						width: 130px;
						border-radius: 50%;
						border: 1px solid #eeeeee;
						box-shadow: 0 0 10px #ddd;
						padding: 10px;
						position: absolute;
						left: 50%;
						/*向左向上平移自身宽高的50%*/
						transform: translate(-50%, -50%);
						background-color: white;

						img {
								height: 100%;
								width: 100%;
								border-radius: 50%;
						}
				}

				.login_form {
						position: absolute;
						bottom: 5%;
						width: 95%;
						padding: 0 20px;
						box-sizing: border-box;
				}

				.btns {
						display: flex;
						justify-content: flex-end;
				}
		}
}
</style>
